<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="{$protocol}cache.amap.com/lbs/static/main1119.css"/>
    <script src="{$protocol}webapi.amap.com/maps?v=1.4.6&key={$gd_key}"></script>
    <script type="text/javascript" src="{$protocol}cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="__PUBLIC__/js/jquery.js"></script>
</head>
<style>
    .amap-marker-label {
        border: 0;
    }
</style>
<body>
<div id="container"></div>
<script>
    window.onload = initMap;
    var map, marker, timeVal, images = {$images}, cycle = 15000;
    function initMap(type) {
        $.get('{$url}', {}, function (res) {
            if (res['status']) {
                var data = res['data'];
                map = new AMap.Map("container", {
                    resizeEnable: true,
                    center: new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]),
                    zoom: 16
                });
                marker = new AMap.Marker({
                    position: new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]),
                    offset: new AMap.Pixel(-20, -10),
                    angle: data['direction'],
                    title: data['tip'],
                    label: {'offset': new AMap.Pixel(20, 20), 'content': data['tip']},
                    icon: new AMap.Icon({
                        size: new AMap.Size(41, 19),  //图标大小
                        image: images[data['img']],
                        imageSize: new AMap.Size(41, 19),
                    })
                });
                marker.setMap(map);
                timeVal = setInterval(updateMarker, cycle);
            } else {
                alert(res['msg']);
            }
        });
    }
    function updateMarker() {
        $.get('{$url}', {}, function (res) {
            switch (res['status']) {
                case 1:
                    var data = res['data'];
                    map.remove(marker);
                    map.setZoomAndCenter(16, new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]));
                    marker = new AMap.Marker({
                        position: new AMap.LngLat(data['location']['coordinates'][0], data['location']['coordinates'][1]),
                        offset: new AMap.Pixel(-20, -10),
                        angle: data['direction'],
                        title: data['tip'],
                        label: {'offset': new AMap.Pixel(20, 20), 'content': data['tip']},
                        icon: new AMap.Icon({
                            size: new AMap.Size(41, 19),  //图标大小
                            image: images[data['img']],
                            imageSize: new AMap.Size(41, 19),
                        })
                    });
                    marker.setMap(map);
                    break;
                default:
                    alert(res['msg']);
                    clearInterval(timeVal);
                    break;
            }
        });
    }
</script>
</body>
</html>